<template>
  <div class="form-info">
    <el-form
      :inline="true"
      :model="recordData"
      ref="ruleForm"
      label-width="150px">
      <el-form-item
        class="formitem"
        v-for="(item,index) in recordForm"
        :key="index"
        :label="item.label">
        :
        {{ recordData[item.key] }}
      </el-form-item>
    </el-form>
    <slot
      name="recordInfoslot"
      :baseInfo="recordData"
    />
  </div>
</template>
<script>
export default {
  name: 'RecordInfo',
  data () {
    return {
      baseInfo: {
        name: 111,
        sex: 231,
        age: 12
      }
    }
  },
  props: {
    recordData: {
      type: Object,
      default: () => {}
    },
    recordForm: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="less">
  .form-info {
    > span {
      margin-right: 10px;
    }
    .formitem {
      // height: 40px !important;
      // line-height: 40px !important
    }
    .el-form-item__label {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      vertical-align: center !important;
    }
    .el-form-item__content {
      vertical-align: center !important;
      height: 40px;
      line-height: 40px;
    }
    .solt-baseInfo-color {
      color: #06f;
      font-weight: 450;
      margin-left: 5px;
    }
  }
</style>
